<template>
   <div>

     <div class="list-btn">
       订单号:<Input v-model.trim="params.nid" placeholder="请输入订单号" style="width: 200px" clearable @keyup.enter.native="getList(url)" />
     </div>
     <div class="list-btn">
       借款时间:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始时间" style="width: 200px"></DatePicker>
       ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束时间" style="width: 200px" ></DatePicker>
     </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">搜索</Button>
    </div>
     <!-- <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh')">代扣</Button>
    </div> -->
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    data () {
      return {

        tag: {
          'title': '待收款列表',
          'path': '/work/waitReceipt/list'
        },
        listTitle: [
          {
            title: '订单号',
            key: 'nid',
            minWidth:180,
            align:'left',
          },
          {
            title: '剩余天数',
            key: 'repayTime',
            minWidth:160,
            align:'center',
            render: (h, params) => {// 审核状态 0审核中，1通过，2拒绝 ，3电核
              let d = this.getRestTime(params.row.repayTime,params.row.dateTime);
              let texts = '';
              texts = d.value;
              return h('div', {
                props: {},
                style:{
                  color:d.color
                }
              }, texts)
            },
          },
     /*     {
            title: '借款日期',
            key: 'borrowTime',
            minWidth:160,
            align:'center',
            render : (h,params) => {
              return h('div',this.getLocalTime(params.row.borrowTime))
            }
          },
          {
            title: '还款时间',
            key: 'repayTime',
            minWidth:120,
            align:'center',
            render : (h,params) => {
              return h('div',params.row.repayTime ? this.getLocalTime(params.row.repayTime) : '—')
            }
          },*/
          /*{
            title: '合同金额(元)',
            key: 'loanMoney',
            minWidth:120,
            align:'center',
            render : (h,params) => {
              return h('div',this.toYuan(params.row.loanMoney))
            }
          },*/
          {
            title: '放款金额(元)',
            key: 'realMoney',
            minWidth:120,
            align:'center',
            render : (h,params) => {
              return h('div',this.toYuan(params.row.realMoney))
            }
          },
          {
            title: '已回收金额(元)',
            key: 'repaymentMoney',
            minWidth:120,
            align:'center',
            render : (h,params) => {
              return h('div',this.toYuan(params.row.repaymentMoney))
            }
          },
          {
            title: '待回收金额(元)',
            key: 'needRepayment',
            minWidth:120,
            align:'center',
            render : (h,params) => {
              return h('div',this.toYuan(params.row.needRepayment))
            }
          },
          // {
          //   title: '操作',
          //   key: 'action',
          //   width: 150,
          //   align: 'center',
          //   fixed: 'right',
          //   render: (h, params) => {
          //     return h('div', [
          //       h('Button', {
          //         props: {
          //           type: 'primary',
          //           size: 'small'
          //         },
          //         style: {
          //           marginRight: '5px'
          //         },
          //         on: {
          //           click: () => {
          //             this.editItem('/work/apEdit', 'edit', this.list[params.index])
          //           }
          //         }
          //       }, '编辑'),
          //       h('Button', {
          //         props: {
          //           type: 'error',
          //           size: 'small'
          //         },
          //         on: {
          //           click: () => {
          //             this.showModal.isShow = true;
          //             this.ids = this.list[params.index].id;
          //           }
          //         }
          //       }, '删除')
          //     ]);
          //   }
          // }
          //       {
          //   title: '操作',
          //   key: 'action',
          //   width: 120,
          //   align: 'center',
          //   render: (h, params) => {
          //     return h('div', [
          //       h('Button', {
          //         props: {
          //           type: 'primary',
          //           size: 'small'
          //         },
          //         style: {
          //           marginRight: '5px'
          //         },
          //         on: {
          //           click: () => {
          //             let data ={
          //               userId : params.row.userId,
          //               nId:  params.row.nid,
          //               contractNumber:params.row.contractNumber,
          //               money:params.row.needRepayment,
          //               type:'1',
          //             }
          //              this.$Modal.confirm({
          //               title: '提示',
          //               content: `<p>是否确定代扣?</p>`,
          //               onOk: () => {
          //                 this.$post('/loan/repayment',data).then(res => {
          //                   if(res.code == 0){
          //                     this.$Message.warning(res.msg)
          //                   }
          //                 })
          //               },
          //               onCancel: () => {
          //               }
          //             });

          //           }
          //         }
          //       }, '代扣'),
          //     ]);
          //   }
          // }
        ],
        url: '/bkcontract/receivable/list',
        nameListUrl: '',
        params: {
         pageCurrent: 1,
         pageLimit: 10
        },

      }
    },
    methods:{
      getRestTime(a,b){
        let rest = {};
        let aTime = this.getLocalDate(a);
        let bTime = this.getLocalDate(b);
        aTime = new Date(aTime.replace(/-/g, "/"));
        bTime = new Date(bTime.replace(/-/g, "/"));
        // console.log(this.getLocalDate(a),this.getLocalDate(b))
        let value = (parseInt(aTime.getTime())-parseInt(bTime.getTime()))/86400000;
        if(value < 0){
          rest.value = `逾期${Math.abs(value)}天`
          // rest.value = value;

            rest.color = '#ed4014';
        }else{
          rest.value = value;
          rest.color = '#515a6e';
        }
        return rest
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }

</style>
